import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/catr.css'
import { Toast } from 'antd-mobile';
import {ee} from '../../utils/events'
import { Empty } from 'antd';
import { cartlist ,cartdelete,cartedit} from '../../request/api.js'
export default class home extends Component {
    constructor(){
        super()
        this.state={
            list:[
                {content:null},
                {content:null}
            ],
            input:{
                wr:false,  
                pt:false

            },
            num1:[],
            num2:[],
            total:0,
            show:true
        
        }
    }
    componentDidMount(){
        this.list()
        this.total()
    }
    componentWillUnmount(){
        // clearTimeout(this.time)
    }
    list(){
    
        if(JSON.parse(sessionStorage.getItem('user'))==null){
            this.props.history.push('/login')
        }else {
            
        let a={
            uid:JSON.parse(sessionStorage.getItem('user')).uid 
        }
        cartlist(a).then(res=>{
            
            
                let newlist=res.list;
                for(let i=0;i<newlist.length;i++){
                    if(newlist[i].content!=null){
                        for(let j=0;j<newlist[i].content.length;j++){
                            newlist[i].content[j].tag=false  
                        }
                    }
                }
                this.setState({list:newlist})
           if(res.list[0].content!=null||res.list[1].content!=null){ }else {
              
            }
                
                if(this.state.list[0].content==null&&this.state.list[1].content==null)
                {
                    this.setState({show:false})
                }
                // console.log(this.state.show);
        })
    }

    }
    // num(){
    //     let a={
    //         uid:JSON.parse(sessionStorage.getItem('user')).uid 
    //     }  
       
    //     cartlist(a).then(res=>{
    //        let num1=[]
    //        let num2=[]
    //         if(res.list[0].content!=null||res.list[1].content!=null){
    //             let newlist=res.list;
    //             for(let i=0;i<newlist.length;i++){
    //                 if(newlist[i].content!=null){
    //                     for(let j=0;j<newlist[i].content.length;j++){
    //                         if(i==0){
    //                             num1.push(newlist[i].content[j].num)
    //                         }else {
    //                             num2.push(newlist[i].content[j].num)
    //                         }
                            
    //                     }
    //                 }
    //             }
    //         }  
    //         // console.log(num1,num2);
    //         this.setState({num1})
    //         this.setState({num2})

    //     })
    // }
    del(id){
        
        let a={
            id
        }
        cartdelete(a).then(res=>{
            Toast.success(res.msg, 1)
            setTimeout(() => {
                this.list()
            }, 1000);
            
        })
    }
    render() {
        return (
            <div className='catr-box'>
      
                <div>
                    <NavBar
                    className='navbar'
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => this.props.history.goBack()}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >购物车</NavBar>
                </div>
                <Empty  description='暂无数据'  className={this.state.show?'dispalynone':''}/>
                <div className='app' className={this.state.show?'app':'dispalynone'}>
                    <ul className="catr-nav w">
                        <li><a href="">全部<span>(20)</span></a></li>
                        <li><a href="">全部<span>(4)</span></a></li>
                        <li><a href="">常卖<span>(2)</span></a></li>
                        <li><a href="">分类 <i className="iconfont icon-shangxiajiantou"></i></a></li>
                    </ul>
                    <div className="xhg"></div>
                    <div className='content'>
                        <div className={ this.state.list[0].content!=null?'top ':'dispalynone top '}>
                            <input type="checkbox" value={this.state.input.wr} checked={this.state.input.wr==true} onChange={()=>this.change(1)}/>
                            <h3>万人团</h3>
                            <div className="right">
                                <span>以免运费</span>
                                <i></i>
                                <a href="">领券</a>
                            </div>
                        </div>
                        <ul className={ this.state.list[0].content!=null?' ':'dispalynone  '}>
                            {
                              this.state.list[0].content!=null?this.state.list[0].content.map((ele,index)=>(
                                   <li key={ele.goodsid}>
                                <div className='co'>
                                    <div className="left">
                                        <input type="checkbox" value={ele.tag} checked={ele.tag===true}  onChange={()=>this.change1(0,ele.goodsid)}/>
                                        <img src={ele.img} alt="" />
                                    </div>
                                    <div className='right'>
                                        <div>
                                            <p>{ele.goodsname}</p>
                                            <p>敏感肌可用，控油祛痘、男女可敏感肌可用，控油祛痘、男女可</p>
                                        </div>
                                        <div className='fot'>
                                            <br />
                                            <span className="zhong">比加入时降低 &yen; 10</span>
                                            <br />
                                            <span className="price">&yen;{(ele.price).toFixed(2)}</span>
                                            <s>&yen;109</s>
                                            <div className="sl">
                                                <i className="iconfont icon-iconjian" onClick={()=>this.jian(ele.num,ele.id)}></i>
                                                <span>{ele.num}</span>
                                                <i className="iconfont icon-iconjia" onClick={()=>this.jia(ele.id)}></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="del" onClick={()=>this.del(ele.id)}>
                                        删除
                                       </div>
                                </div>
                            </li>  
                                )):''
                            }
                           
                        </ul>

                        <div  className={ this.state.list[1].content!=null?'top top2':'dispalynone top top2'}>
                            <input type="checkbox" value={this.state.input.pt} checked={this.state.input.pt==true} onChange={()=>this.change(2)}/>
                            <h3>小U自营</h3>
                            <div className="right">
                                <span>以免运费</span>
                                <i></i>
                                <a href="">领券</a>
                            </div>
                        </div>
                        <ul className={ this.state.list[1].content!=null?' ':'dispalynone  '}>

                        {
                              this.state.list[1].content!=null? this.state.list[1].content.map(ele=>(
                                   <li key={ele.id}>
                                <div className='co'>
                                    <div className="left">
                                        <input type="checkbox" value={ele.tag} checked={ele.tag}  onChange={()=>this.change1(1,ele.goodsid)}/>
                                        <img src={ele.img} alt="" />
                                    </div>
                                    <div className='right'>
                                        <div>
                                            <p>{ele.goodsname}</p>
                                            <p>敏感肌可用，控油祛痘、男女可敏感肌可用，控油祛痘、男女可</p>
                                        </div>
                                        <div className='fot'>
                                            <br />
                                            <span className="zhong">比加入时降低 &yen; 10</span>
                                            <br />
                                            <span className="price">&yen;{(ele.price*ele.num).toFixed(2)}</span>
                                            <s>&yen;109</s>
                                            <div className="sl">
                                                <i className="iconfont icon-iconjian" onClick={()=>this.jian(ele.num,ele.id)}></i>
                                                <span>{ele.num}</span>
                                                <i className="iconfont icon-iconjia" onClick={()=>this.jia(ele.id)}></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="del" onClick={()=>this.del(ele.id)}>
                                        删除
                                       </div>
                                </div>
                            </li>  
                                )):'暂无数据'
                            }
                        </ul>
                    </div>
                    <div className="fix">
                        <div  className="top">
                            <div  className="col1">
                               
            </div>
                            <div  className="col4" onClick={()=>this.settlement()}>结算</div>
                            <div  className="col3">
                                <p>&yen;{this.state.total}</p>
                                <span>已优惠&yen;200元</span>
                            </div>
                            <div  className="col2">
                                <h3>合计</h3>
                                <span>以免运费</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    }
 change1( i,id){
     let a=this.state.list
    //  console.log(i);
    let b= a[i].content.findIndex(ele=>ele.goodsid==id)
    a[i].content[b].tag= !a[i].content[b].tag
    // console.log(a);
    this.setState({list:a})
    // console.log(this.state.list);
    this.total()
    let c=this.state.list[i].content.every(ele=>ele.tag)
    if(i==0){
        let j=this.state.input
        j.wr=c;
        this.setState({input:j})
    }else {
        let j=this.state.input
        j.pt=c;
        this.setState({input:j})
    }
    // console.log(c);
 }
 change(i){
      let a= this.state.input
     if(i==1){
        a.wr=!a.wr
     }else {
         a.pt=!a.pt
     }
    this.setState({input:a})
    //循环遍历子项
    let b=this.state.list
    //  console.log(b);
    if(b[0].content!==null){
         for(let i=0;i<b[0].content.length;i++){
        b[0].content[i].tag=a.wr
    }
    }
   if(b[1].content!==null){
    for(let j=0;j<b[1].content.length;j++){
        // console.log( b[1].content[j]);
        b[1].content[j].tag=a.pt
    }
   }
   
    for(let j=0;j<b[1].content.length;j++){
        // console.log( b[1].content[j]);
        b[1].content[j].tag=a.pt
    }
    this.setState({list:b})
    this.total()
 }
 total(){
     let a=0
     for(let i=0;i<this.state.list.length;i++){
         if(this.state.list[i].content!=null){
              for(let j=0;j<this.state.list[i].content.length;j++){
                  if(this.state.list[i].content[j].tag==true){
                       a+= this.state.list[i].content[j].price*this.state.list[i].content[j].num
                  }
        }
         }
    }
    // console.log(a);
    // a.toFixed(2)
    this.setState({total:a.toFixed(2)})

 }
 settlement(){
     let a=[]
     let b=[]
    if(this.state.list[0].content!==null){
          a= this.state.list[0].content.filter(ele=>ele.tag==true)
    }
    if(this.state.list[1].content!==null){
          b= this.state.list[1].content.filter(ele=>ele.tag==true)
    }
   
    // let b= this.state.list[1].content.filter(ele=>ele.tag==true)
    // console.log(a);
    // console.log(b);
    for(let i=0;i<b.length;i++){
        a.push(b[i])
    }
    if(a.length!=0){

       this.time= setTimeout(() => {
           ee.emit('message', a,this.state.total) 
        }, 500);
        this.props.history.push('/order')
    }else {
        Toast.fail('请选择', 1)
    }
 }
 jia(id){
 
    cartedit({id,type:2}).then(res=>{
       
    })
    // let a=this.state.list
    // let b= a[i].content.findIndex(ele=>ele.goodsid==id)
    // a[i].content[b].num= a[i].content[b].num+1
    // this.setState({list:a})
    // console.log(a[i].content[b].num);
    this.list()
 }
 jian(i,id){
    //  console.log(i);
    if(i>1){
        cartedit({id,type:1}).then(res=>{
           this.list()
        })
    }
   
 }

}
